<template>
  <div id="app">
    <button class="weui-btn weui-btn_primary" type="button" @click="showToast">toast</button>
    <button class="weui-btn weui-btn_primary" type="button" @click="showAlert">alert</button>
    <button class="weui-btn weui-btn_primary" type="button" @click="showConfirm">confirm</button>
    <button class="weui-btn weui-btn_primary" type="button" @click="request">ajax</button>
    <button class="weui-btn weui-btn_primary" type="button" @click="showPopup">popup</button>
    <button class="weui-btn weui-btn_primary" type="button" @click="showCalendar">calendar</button>
    {{demo1.selectedDate}}
    <wii-calendar v-model="demo1.calendarShow" :default-date="demo1.defaultDate" @change="demo1DateChange">
    </wii-calendar>
    
    <wii-uploader :conf="{validate: {mutil: 3}}" :data="{}"></wii-uploader>

    <wii-popup-picker :conf="{}" :data="list" v-model="value" ref="picker"></wii-popup-picker>

    <wii-city-picker ref="citypicker" v-model="value"></wii-city-picker>
    {{$refs.citypicker&&$refs.citypicker.value}}

    <wii-datetime-picker v-model="current_date" @on-change="change" title="Birthday" start-date="1900-01-01" end-date="2999-01-01"></wii-datetime-picker>

    <wii-popup v-model="proup.show" @on-hide="popupHandler('hide')" @on-show="popupHandler('show')">
        <div class="my-list">
            <div class="weui-actionsheet__menu">
                <div @click.stop.prevent="clickMenu(1)" class="weui-actionsheet__cell">示例菜单</div>
                <div @click.stop.prevent="clickMenu(2)" class="weui-actionsheet__cell">示例菜单</div>
                <div @click.stop.prevent="clickMenu(3)" class="weui-actionsheet__cell">示例菜单</div>
                <div @click.stop.prevent="clickMenu(4)" class="weui-actionsheet__cell">示例菜单</div>
            </div>
            <div class="weui-actionsheet__action">
                <div @click.stop.prevent="clickMenu(-99)" class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
            </div>
        </div>
    </wii-popup>


    <wii-button :conf="{name:'测试',url:'http://www.qq.com'}"></wii-button>
  </div>
</template>

<script>
import 'assets/js/wii_entry';
import {Utils} from 'wmu2';

export default {
  data() {
    return {
      show:false,
      list:[['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']],
      value: [],
      current_date: '',
      demo1: {
        calendarShow: false,
        defaultDate: new Date(),
        selectedDate: dateFormat(new Date(), "yyyy-MM-dd")
      },
      proup:{
        show: false
      }
    }
  },
  components:{
  },
  //相关操作事件
  methods: {
    showAlert(){
      var that = this;
      this.$wii.alert.show({
          title: '弹窗标题',
          content: 'wii is more better!',
          onShow () {

            console.log('Plugin: I\'m showing')
          },
          onHide () {
            that.$wii.alert.hide();
            console.log('Plugin: I\'m hiding')
          }
        });
    },
    showConfirm(){
      var that = this;
      this.$wii.confirm.show({
          title: '标题',
          content: '内容',
          // 组件除show外的属性
          onCancel () {
            that.$wii.confirm.hide();
          },
          onConfirm () {
              that.$wii.confirm.hide();
          }
        })
    },
     showToast(){
        this.$wii.toast.show({
            text: '数据加载中',
            type: 'loading',
            time: 3000
        });
     },
     request(){
        Utils.Ajax.post(this,'/api/dialog/get_info',{})
        .then((res)=>{
          console.log(res);
        });
     },
     showPopup(){
      this.proup.show = true;
     },
     popupHandler(res){
      console.log(res);
     },
     clickMenu(menuId){
      console.log(menuId);
      this.proup.show = false;
     },
     showCalendar(){
      this.demo1.calendarShow = true;
     },
     demo1DateChange(date, result){
      this.demo1.selectedDate = result;
     },
     change(evt){
      console.log(evt);
     }
  }
}
</script>

<style lang="less">

</style>
